<template>
  <div>
    <!-- 头部-->
    <div class="header-box">
      <div class="left-box" @click="goPreviou">
        <img src="@/assets/left.png" alt="" srcset="">
      </div>
      <div class="h-box">试卷答题</div>
    </div>
    <!--倒计时-->
    <!--    <div class="countdown-box">-->
    <!--      60:00:00-->
    <!--    </div>-->
    <!--试卷标题以及你内容-->
    <div class="paper-box">
      <div class="title-box">
        <span>试卷名称：</span>
        {{ form.paperTitle }}
      </div>
      <div class="exam-info">
        <div style="margin-right: 10px">
          <span>试卷总分：</span>
          <span>{{ form.testScore }}</span>
        </div>
        <div>
          <span>试题总数：</span>
          <span>{{ form.questionsQuantity }}</span>
        </div>
      </div>
    </div>
    <!-- 试卷部分以及选择封装-->
    <div class="box-top">
      <div class="topic-item-box" v-for="(item,index) in form.paperContent" :key="item.id">
        <!-- 题目标题-->
        <div style="margin-bottom: 10px">
          {{ index + 1 }} .
          <span v-if="item.questionsType==0">（单选题）</span>
          <span v-if="item.questionsType==1">（多选题）</span>
          <span v-if="item.questionsType==2">（判断题）</span>
          {{ item.questionsContent }}

        </div>
        <!--封装选项-->
        <question-page :qType="item.questionsType" :qItem="item.questionsOption" :paperList="item.questionsOption"
                       :answer="answer.answerItems[index]"></question-page>
      </div>
    </div>
    <div>
      <div class="btn-box" @click="onsubmit">
        提交试卷
      </div>
    </div>
  </div>
</template>
<script>
import QuestionPage from "@/components/questionPage.vue";
import {paperDetail, scoring} from "@/api";

export default {
  name: "indexPage",
  components: {QuestionPage},
  data() {
    return {
      form: {},
      detailList: [],
      cheakList: [],
      answer: {
        answerItems: []
      },
      subParams: {},
      ids: null
    }
  },
  created() {
    let id = this.$route.query.id
    this.ids = id
    console.log(parseInt(this.ids))
    paperDetail(id).then(res => {
      this.form = res.data
      // this.cheakList = JSON.parse(res.data.paperContent)
      // localStorage.setItem('paperList',JSON.stringify(res.data))
      this.form.paperContent = JSON.parse(this.form.paperContent)
      this.form.paperContent.forEach(item => {
        item.questionsOption = JSON.parse(item.questionsOption)
      })

      this.initAnswer()
    })
  },
  methods: {
    onsubmit() {
      this.subParams = {
        paperId: this.ids,
        content: JSON.stringify(this.answer),
      }
      scoring(this.subParams).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "操作成功",
            type: 'success'
          });
          this.$router.push({
            path: '/paperInfo',
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    goPreviou() {
      this.$router.back(-1)
    },
    initAnswer() {
      console.log(this.form)
      // this.answer.id = this.form.id
      let titleItemArray = this.form.paperContent
      console.log(titleItemArray, 'ttt')
      titleItemArray.forEach((tTtem) => {
        this.answer.answerItems.push({questionId: tTtem.id, content: null, contentArray: [], completed: false})
      });
    },
  },
}
</script>
<style scoped lang="scss">
.header-box {
  margin-top: 10px;
  display: flex;
  padding: 5px 10px;
}

.h-box {
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-top: 0;
}

.left-box {
  display: flex;
  align-items: center;
}

.countdown-box {
  padding: 5px 0;
  text-align: center;
  color: white;
  background-color: #45c4dd;
}

.btn-box {
  border-radius: 5px;
  margin: 0 10px;
  color: white;
  text-align: center;
  background-color: #45c4dd;
  padding: 10px 20px;
  font-size: 16px;
}

.paper-box {
  margin-top: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #999999;
}

.title-box {
  font-size: 20px;
  text-align: center;
}

.exam-info {
  display: flex;
  justify-content: center;
  font-size: 15px;
  text-align: center;
  padding-bottom: 10px;
}

.topic-item-box {
  padding: 10px 20px;
  font-size: 14px;
}


/deep/ .el-radio__original {
  display: none !important; /* 隐藏原生 radio 输入，但仍然允许交互 */
}

/deep/ .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}

::v-deep .el-radio {
  display: block;
  margin-bottom: 10px;
}

::v-deep .el-checkbox {
  display: block;
}
</style>
